<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>编辑秒杀活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">

        <form class="layui-form">

          <div class="layui-form-item">
              <label  class="layui-form-label">
                  秒杀商品
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="goodstitle" name="goodstitle" class="layui-input" placeholder="输入关键字搜索商品">
                  <input  type="hidden" class="layui-input" name="gid"  id="gid">
                  <input  type="hidden" class="layui-input" name="lid"  id="lid">
              </div>
          </div>

            <div class="layui-form-item">
                <label  class="layui-form-label">
                    秒杀开始时间
                </label>
                <div class="layui-input-inline">
                    <input  type="text" class="layui-input" name="starttime"  id="starttime" placeholder="请选择起止日期">
                </div>
            </div>


            <div class="layui-form-item">
                <label  class="layui-form-label">
                    秒杀结束时间
                </label>
                <div class="layui-input-inline">
                    <input  type="text" class="layui-input" name="endtime"  id="endtime" placeholder="请选择起止日期">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    秒杀数量
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="inventory" name="inventory" class="layui-input">
                </div>
                <label class="layui-form-label" id="total" style="width: 100px">

                </label>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    秒杀价格
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="price" name="price" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
              <label  class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="edit" lay-submit="" id="edit">
                  保存
              </button>
          </div>
      </form>
    </div>

    <div id="searchGoods" >
        <ul id="searchGoodsUl">
<!--            <li onclick='add(1,"新鲜好吃")'>苹果</li>-->
<!--            <li>白菜</li>-->
<!--            <li>茄子</li>-->
<!--            <li>香蕉</li>-->
        </ul>
    </div>


    <style>
        #searchGoods{
            display: none;
            position: absolute;
            top:50px;
            left: 130px;
            border: 1px solid #c2c2c2;
            border-radius: 5px;
            z-index: 999;
            background: white;
        }
        #searchGoods li{
            width: 400px;
            height: 20px;
            line-height: 20px;
            padding: 2px;
            color: #495060;
            font-size: 14px;
            /*border: 1px solid blue;*/
        }
    </style>
    <script>


        /*进点击的商品id保存*/
        var coupongoodsArry=[]
        function getGoods(gid){
            coupongoodsArry.push(gid)
            var item='<i  class="layui-icon icon'+gid+'">&#xe605;</i><i  style="margin-left: 10px" class="layui-icon icon'+gid+'" onclick="delGoods('+gid+')">&#x1006;</i>'
            $('#id'+gid).append(item)
            layer.alert('商品已添加', {icon: 6});
        }

        function delGoods(gid) {
            // alert("删除")
            remove(coupongoodsArry,gid)
            layer.alert('商品已删除', {icon: 5});
        //    清除div中的icon
            $('.icon'+gid).remove()
        }
        var gid
        function add(gidItem,title,total){
            //    alert(title)
            // alert(gid)
            gid=gidItem
            $('#searchGoods').css({"display":"none"});
            $('#goodstitle').val(title)
            $('#total').html("库存余量："+total)
        }


        layui.use(['upload','form','layer','laydate','dropdown'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer
        ,upload = layui.upload
            ,laydate=layui.laydate
            ,dropdown=layui.dropdown


            //当鼠标位于input上面有输入的时候
            $('#goodstitle').on('compositionend',e=>{
                var keyword = e.delegateTarget.value;
                console.log(keyword)
                //请求即可
                $.ajax({
                    url: '/goods/getGoodsByKey/'+keyword,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:'json',
                    success:function(res){
                        console.log("搜索成功")
                        $('li').remove()
                        $('#searchGoods').css({"display":"block"});
                        // var goodsData=[]
                        var data = res.data
                        for (var i=0;i<data.length;i++){
                            var gid=data[i].gid
                            var total=data[i].total
                            var titleItem=data[i].goodstitle
                            var title="'"+titleItem+"'"
                            console.log("title:"+title)
                            console.log("total:"+total)
                            // var jsonObj = {"title":data[i].goodstitle};
                            // goodsData.push(jsonObj)
                            // var item = ' <li onclick="add('+gid+','+title+')">'+data[i].goodstitle+'</li>'
                            var item = ' <li onclick="add('+gid+','+title+','+total+')">'+data[i].goodstitle+'</li>'

                            $('#searchGoodsUl').append(item)
                        }
                        // console.log(goodsData)
                        // dropdown.render({
                        //     elem: '#gid' //可绑定在任意元素中，此处以上述按钮为例
                        //     ,trigger:'hover'
                        //     , data:goodsData
                        //     ,click: function(data, othis){
                        //         // var elem = $(this.elem)
                        //         //     ,listId = elem.data('id'); //表格列表的预埋数据
                        //         // layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
                        //     }
                        // })
                    }
                })
            })

            laydate.render({
                elem: '#starttime',//指定html中的id
                type:'datetime'
            })
            laydate.render({
                elem: '#endtime',//指定html中的id
                type:'datetime'
            })

            form.on('submit(edit)',function (data){
                var formData=new FormData()
                formData.append("gid",$('#gid').val())
                formData.append("lid",$('#lid').val())
                formData.append("starttime",$('#starttime').val())
                formData.append("endtime",$('#endtime').val())
                formData.append("inventory",$('#inventory').val())
                formData.append("price",$('#price').val())
                console.log(formData.toString())
                $.ajax({
                    url: 'lightdeals/editLightdeals',
                    type:'post',
                    data:formData,
                    processData:false,
                    contentType:false,
                    async:false,
                    dataType:'json',
                    success:function (res){
                        alert('编辑成功')
                        console.log(res)
                        layer.msg('编辑成功', {icon: 1});
                    }
                })
            })
        });
    </script>
  </body>

</html>